import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import {  AtListItem,AtDivider } from "taro-ui"
import { View,Image } from '@tarojs/components'

import "./TimeThing.scss"

class TimeThing extends Component {

  constructor(){
    super(...arguments)
    if (this.props.data.status == 1) {
      this.state = {
        data:this.props.data,
        picture:'http://39.106.116.133:8080/images/others/1.png'
      }
    }else if (this.props.data.status == 2) {
      this.state = {
        data:this.props.data,
        picture:'http://39.106.116.133:8080/images/others/2.png'
      }
    }else{
      this.state = {
        data:this.props.data,
        picture:'http://39.106.116.133:8080/images/others/3.png'
      }
    }
  }

  timeFormat = (time) =>{
    switch (time) {
      case '08': return '08:00-09:00'
      case '09': return '09:00-10:00'  
      case '10': return '10:00-11:00'
      case '14': return '14:00-15:00'
      case '15': return '15:00-16:00'
      case '16': return '16:00-17:00'
      default:return time
    }
  }

  handleClick =() => {
    if(this.state.picture == 'http://39.106.116.133:8080/images/others/1.png'){
      const page = '/pages/pagesA/placeOrder/placeOrder?date='+this.state.data.date+'&fee='+this.props.fee+'&doctor_name='+this.props.doctor_name+'&hour='+this.state.data.hour+'&week='+this.state.data.week+'&doctor_id='+this.state.data.doctor_id
      Taro.navigateTo({url: page})
    }
  }

  render () { 
    return (
      <View>
        <AtListItem note={this.state.data.week + ' ' +this.timeFormat(this.state.data.hour)}
          title={this.state.data.date} className='things' hasBorder={false}/>
        <Image src={this.state.picture} style='width: 70px;height: 30px;background: #fff;'
            className='image' onClick={this.handleClick} ></Image>
        <AtDivider height='10' lineColor='#f3f3f3'/>
      </View>
     
    )
  }
}

export {TimeThing}